<template>
    <div style="padding:20px;">
        <el-collapse accordion>
            <el-collapse-item v-for="dep in depart">
                <template slot="title">
                    {{dep.name}}
                    <el-switch v-model="dep.isdisable"> </el-switch>
                </template>
                <el-table :data="group" v-for="group in groups" v-if="group.pid === dep.id" @row-click="rowshop" @row-dblclick="submit">
                    <el-table-column prop="id" label="#"></el-table-column>
                    <el-table-column prop="name" label="小组"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isdisable"> </el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
        <el-row style="position:absolute;bottom:5px; right:10px;">
            <el-button class="fr" icon="close" type="danger" @click="closewin" style="margin-left:10px;">取消关闭</el-button>
            <el-button class="fr" icon="upload2" type="success" @click="submit">确定选择</el-button>
        </el-row>
    </div>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'selectDepartment',
    data() {
        return {
            depart: [],
            groups: [],
            select: {},
            allshop: []
        }
    },
    methods: {
        async getshop() {
            let data = await C.ajax('/shop/user/edituserdepartment')
            if (data) {
                this.depart = data.dep
                data.gro.forEach((res, index) => {
                    res.pid = ''
                    res.forEach((r) => {
                        res.pid = r.pid
                        this.allshop.push(r)
                    })
                })
                data.dep.forEach((res) => {
                    this.allshop.push(res)
                })
                this.groups = data.gro
            }
        },
        rowshop: function(row, event) {
            this.allshop.forEach((res) => {
                res.isdisable = false
            })
            row.isdisable = true
            this.select = row
        },
        submit: function() {
            var that = this
            this.allshop.forEach((res) => {
                if (res.isdisable == true) {
                    that.select = res
                }
            })
            if (!this.select.id) {
                C.error('请选择分类')
                return false
            }
            C.closeBrowserWindow(this.select)
        },
        closewin() {
            C.closewin()
        }
    },
    mounted: function() {
        this.getshop()
    }
}
</script>
<style>
.el-collapse {
    height: 580px;
    overflow: auto;
}

.el-collapse-item__header {
    position: relative;
}

.el-collapse-item__header .el-switch {
    position: absolute;
    top: 25%;
    right: 8%;
}

.el-collapse-item__arrow {
    line-height: 25px;
}
</style>